<template>
  <el-dialog
    v-model="dialogVisible"
    :title="$t(titleKey)"
    :width="width"
    :before-close="handleClose"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
  >
    <slot></slot>
    
    <template #footer v-if="showFooter">
      <span class="dialog-footer">
        <slot name="footer">
          <el-button @click="handleCancel">
            {{ $t('cancel') }}
          </el-button>
          <el-button
            type="primary"
            :loading="confirmLoading"
            @click="handleConfirm"
          >
            {{ $t('confirm') }}
          </el-button>
        </slot>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  titleKey: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '50%'
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  confirmLoading: {
    type: Boolean,
    default: false
  },
  closeOnClickModal: {
    type: Boolean,
    default: true
  },
  closeOnPressEscape: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
}

const handleClose = (done) => {
  emit('close')
  done()
}
</script>